<template>
    <div class="content-main">
        <div class="breadcrumb">
            <div class="breadcrumb-icon">
                <img src="./../../assets/images/breadcrumb_icon.png" />
            </div>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>实训统计</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- <bread-crumb-back></bread-crumb-back> -->
        </div>
        <div class="content-box">
            <div class="content-title" style="margin-top:20px;">
                <i class="iconfont icon-yunongtongshenfenzhenghaoma"></i> 学生信息
                <!-- <div class="content-title-btn-box">
                    <el-button type="primary">学习统计报告</el-button>
                </div> -->
            </div>
            <div class="student-info-box">
                <div class="student-info-item item-fl">
                    <el-row>
                        <el-col :span="12">
                            <div class="info-avatar">
                                <img src="./../../assets/images/student_avatar.png" />
                                <span>{{ listData.userName }}</span>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="info-item">
                                <i class="iconfont icon-banjiguanli"></i>
                                <span>{{ listData.className }}</span>
                            </div>
                            <div class="info-item">
                                <i class="iconfont icon-yunongtongshenfenzhenghaoma"></i>
                                <span>{{ listData.userNumber }}</span>
                            </div>
                            <div class="info-item">
                                <i class="iconfont icon-xingbie---"></i>
                                <span>{{ listData.userSex == 'f' ? '女' : '男' }}</span>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div class="student-info-item item-fr">
                    <div class="info-item-title">
                        <span>案例用时统计(分钟)</span>
                        <span>X 日期: Y 案例时长</span>
                    </div>
                    <div style=" height:200px; margin-top: 20px;" id="category-echarts"></div>
                    <pie-echart :id="'category-echarts'" :data="options" style="height:200px; margin-top: 20px;"></pie-echart>
                </div>
            </div>
            <div class="content-title" style="margin-top:20px;">
                <i class="iconfont icon-tongji"></i> 学习统计分析
            </div>
            <div class="learn-statistics">
                <div class="learn-statistics-item">
                    <ul>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.uploadFileSize }}</span>
                                <span>实训文件总大小</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon.png" />
                            </div>
                        </li>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.passRate }}%</span>
                                <span>及格率</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon2.png" />
                            </div>
                        </li>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.submitReportNum }}</span>
                                <span>提交案例报告数量</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon3.png" />
                            </div>
                        </li>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.reportSubmitRate }}%</span>
                                <span>案例报告提交率</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon4.png" />
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="learn-statistics-item">
                    <ul>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.loginNum }}</span>
                                <span>登录次数</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon6.png" />
                            </div>
                        </li>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.enterProjectNum }}</span>
                                <span>进入案例次数</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon7.png" />
                            </div>
                        </li>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.testTotalTime }}</span>
                                <span>案例实训时长</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon8.png" />
                            </div>
                        </li>
                        <li>
                            <div class="learn-statistics-text">
                                <span>{{ listData.studyProjectNum }}</span>
                                <span>正在学习案例数</span>
                            </div>
                            <div class="learn-statistics-icon">
                                <img src="./../../assets/images/learn_statistics_icon10.png" />
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="content-title" style="margin-top:20px;">
                <i class="iconfont icon-tongji9"></i> 案例统计分析
            </div>
            <div class="statistics-analysis-tip" v-if="projectStatisticsVOList.length == 0">
                暂无统计分析
            </div>
            <div class="statistics-analysis-item item-three" v-else v-for="(item, index) in projectStatisticsVOList">
                <div class="statistics-analysis-title">
                    <div class="title-fl">
                        <span></span>{{ item.projectName }}
                    </div>
                </div>
                <div class="statistics-analysis-box">
                    <el-row>
                        <el-col>
                            <span class="col-num">{{ item.enterProjectNum }}</span>
                            <span class="col-text">查看案例数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.viewCustomItemTotalNum }}</span>
                            <span class="col-text">查看练习案例数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.uploadFileSize }}</span>
                            <span class="col-text">实训文件大小</span>
                        </el-col>
                        <!-- <el-col>
                            <span class="col-num">{{ item.projectAchievement }}分</span>
                            <span class="col-text">总成绩</span>
                        </el-col> -->
                        <el-col>
                            <span class="col-num">{{ item.viewPresetItemTotalNum }}</span>
                            <span class="col-text">查看教学案例数</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.projectTestTime }}</span>
                            <span class="col-text">案例实训时长</span>
                        </el-col>
                        <el-col>
                            <span class="col-num">{{ item.uploadFileNum }}</span>
                            <span class="col-text">实训文件数量</span>
                        </el-col>
                        <!-- <el-col>
                            <span class="col-num">{{ item.scoreLevel == null ? '-' : item.scoreLevel }}</span>
                            <span class="col-text">成绩等级</span>
                        </el-col> -->
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import BreadCrumbBack from '@/components/breadCrumbBack.vue'
    import pieEchart from './../../components/pieEchart.vue'
    export default {
        components: {
            pieEchart,
            BreadCrumbBack
        },
        data () {
            return {
                userId: '',
                listData: '',
                options: {},
                projectStatisticsVOList: []
            }
        },
        created () {
            this.userId = this.$route.query.detailId
            this.init() //初始化
        },
        methods: {
            init(){
                let self = this
                self.$http.post('/dataplatform/basis/functions/statistics/ts/getStuTrainingStatistics').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.listData = res.data
                        self.projectStatisticsVOList = res.data.projectStatisticsVOList
                        //案例用时统计
                        self.categoryEchart(res.data)
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            categoryEchart(data){
                let self = this
                let timeArr = [], dateArr = []
                for(let i = 0; i < data.timeList.length; i++){
                    timeArr.push(data.timeList[i].time)
                    dateArr.push(data.timeList[i].date)
                }
                self.options = {
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 25,
                            end: 85
                        }
                    ],
                    xAxis: {
                        type: 'category',
                        data: dateArr
                    },
                    yAxis: {
                        name : '分数',
                        type: 'value',
                        max: Math.max(...timeArr)
                    },
                    grid: {
                        left: '0',   //图表距边框的距离
                        right: '0',
                        bottom: '0',
                        containLabel: true,
                        x:10,
                        y:10,
                        borderWidth:1,
                    },
                    textStyle:{
                        fontSize:15,
                        color:'#727272'
                    },
                    series: [{
                        data: timeArr,
                        type: 'line'
                    }]
                }
            }
        }
    }
</script>
